<template>
  <view class="main">
    <view class="top">
      <NavBar
        title="选择感兴趣的行业"
        :fixed="true"
        right-text="下一步"
        @onClickRight="onClickRight"
      />
      <view class="select">
        <view class="dispaly-just-between">
          <view class="select-left dispaly-center">
            <view class="select-txt">已选行业</view>
            <view class="select-txt">
              <view
                >（<text style="color: #0753fd">{{ selectTagList.length }}</text
                >/<text>1</text>）
              </view>
            </view>
          </view>
          <view class="select-right dispaly-center">
            <!-- <view class="select-right-text">行业圈子推荐</view> -->
            <!-- <view>
                            <van-switch active-color="#0753fd" inactive-color="#eeeeee" v-model="checked" />
                        </view> -->
          </view>
        </view>
        <view class="select-tag dispaly-center">
          <view
            class="tag dispaly-just-between"
            v-for="(item, index) in selectTagList"
            :key="index"
          >
            <view class="tag-txt">{{ item.name }}</view>
            <view class="tag-icon" @click="deleteTag(item, index)">
              <van-icon name="cross" color="#0753fd" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="select-list dispaly-just-between">
      <scroll-view
        class="scroll-view-l"
        scroll-y="true"
        :style="{ height: selectHeight + 'px' }"
      >
        <view
          id="demo1"
          class="l-item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="clickOneCate(item, index)"
          :class="{ active: current == index }"
          >{{ item.name }}</view
        >
      </scroll-view>
      <scroll-view
        class="scroll-view-r"
        scroll-y="true"
        :style="{ height: selectHeight + 'px' }"
      >
        <view
          id="demo1"
          class="r-item dispaly-just-between"
          v-for="(item, index) in twoDataList"
          :key="index"
          @click="handleSelection(item.id)"
        >
          <view :class="{ active: item.isSelect }">{{ item.name }}</view>
          <view class="sel-icon dispaly-align-center" v-if="item.isSelect">
            <van-icon name="success" color="#fff" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getScreenSHeight, getElementHeight } from "@/utils/util";
import { onLoad } from "@dcloudio/uni-app";
import { getIndustryList, updateUserInfo, getUserInfo } from "@/api/apiList";

const getListData = async () => {
  const res = await getIndustryList();
  if (res.code == 200) {
    dataList.value = res.data;
    console.log(res, "res");
  }
};

const checked = ref(false);
const onClickRight = async () => {
  if (selectTagList.value.length) {
    const formData = {
      userId: uni.getStorageSync("userInfo").userId,
      industryId: selectTagList.value[0].id,
    };
    const res = await updateUserInfo(formData);
    if (res.code == 200) {
      uni.setStorageSync("isRemod", checked.value);
      getUserInfoData();
      uni.reLaunch({
        url: "/pages/index/index",
      });
    }
  } else {
    uni.showToast({
      title: "请选择行业",
      icon: "none",
    });
  }
};

const getUserInfoData = async () => {
  const res = await getUserInfo();
  if (res.code == 200) {
    uni.setStorageSync("userInfo", res.data);
  }
};

// 选中的分类
const selectTagList = ref([]);

// 分类数据
const dataList = ref([]);

// 点击一级分类
const current = ref(0);
const clickOneCate = (item, index) => {
  current.value = index;
  if (item.children.length) {
    twoDataList.value = item.children;
  } else {
    twoDataList.value = [];
  }
};

// 点击二级分类
const twoDataList = ref([]); // 二级分类列表
const handleSelection = (itemId) => {
  let selectedCount = 0;
  let selectedItem = null;
  for (const group of dataList.value) {
    const item = group.children.find((child) => child.id === itemId);
    if (item) {
      selectedItem = item;
      break;
    }
  }
  if (selectedItem) {
    for (const group of dataList.value) {
      selectedCount += group.children.filter((child) => child.isSelect).length;
    }
    if (selectedItem.isSelect) {
      selectedItem.isSelect = false;
    } else {
      if (selectedCount < 1) {
        selectedItem.isSelect = true;
      } else {
        uni.showToast({
          title: "最多选择一个行业哦~",
          icon: "none",
        });
      }
    }
  } else {
    console.log("Item not found.");
  }
  selectTagList.value = filterIsSelectTrue();
};

// 整合所有chilren
let childList = ref([]);
const concatChild = () => {
  dataList.value.forEach((item) => {
    if (item.children.length) {
      item.children.forEach((child) => {
        childList.value.push(child);
      });
    }
  });
};

// 过滤出isSelect为true
const filterIsSelectTrue = () =>
  childList.value.filter((item) => item.isSelect);

// 删除选择的标签
const deleteTag = (item, index) => {
  let tagIndex = selectTagList.value.findIndex((data) => data.id == item.id);
  selectTagList.value.splice(tagIndex, 1);
  childList.value.forEach((data) => {
    if (data.id == item.id) {
      data.isSelect = false;
    }
  });
};

onLoad(async () => {
  await getListData();
  twoDataList.value = dataList.value[0].children;
  concatChild();
});

const selectHeight = ref(0);
onMounted(async () => {
  const topHeight = await getElementHeight(".top");
  selectHeight.value = await getScreenSHeight(Number(topHeight));
});
</script>

<style lang="scss" scoped>
.active {
  color: #0753fd !important;
}

.main {
  .select {
    background-color: #fff;
    padding: 40rpx 30rpx;

    .select-left {
      .select-txt {
        font-family: PingFang SC Regular;
        font-weight: 400;
        font-size: 26rpx;
        color: #111111;
      }
    }

    .select-right {
      .select-right-text {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        font-weight: normal;
        color: #111111;
        margin-right: 16rpx;
      }
    }

    .select-tag {
      margin-top: 30rpx;

      .tag:first-child {
        margin-right: 20rpx;
      }

      .tag {
        border-radius: 8rpx;
        background: #ffffff;
        box-sizing: border-box;
        border: 1px solid #0753fd;
        padding: 16rpx 20rpx;

        .tag-txt {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          font-weight: normal;
          color: #0753fd;
          margin-right: 20rpx;
        }
      }
    }
  }

  .select-list {
    .scroll-view-l {
      background-color: #fff;

      .l-item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        color: #111111;
        padding: 50rpx 0 50rpx 32rpx;
      }
    }

    .scroll-view-r {
      .r-item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        color: #111111;
        padding: 50rpx 32rpx 50rpx 32rpx;
        box-sizing: border-box;

        .sel-icon {
          width: 32rpx;
          height: 32rpx;
          background-color: #0753fd;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
